<template>
  <div>
    <VueEcharts :option="option" style="width: 600px; height: 600px; margin: 0 auto;" />
  </div>
</template>

<script setup lang="ts">
import VueEcharts from 'vue-echarts';
import { read } from "../../stores/host";
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const option = ref<echarts.EChartsOption | null>(null);

const tubiao = async () => {
  try {
    const res = await read.get("procurementread/api/Procurement/GetCount");
    if (!res?.data?.data) {
      console.error("API response is invalid:", res);
      return;
    }

    const orderdata = res.data.data;
    if (!Array.isArray(orderdata)) {
      console.error("orderdata is not an array:", orderdata);
      return;
    }

    const dateArray = orderdata.map(item => item.day).filter(Boolean);
    const countArray = orderdata.map(item => item.count).filter(Boolean);

    option.value = {
      xAxis: {
        type: 'category',
        data: dateArray
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: countArray,
          type: 'bar'
        }
      ]
    };
  } catch (error) {
    console.error("Failed to fetch data:", error);
  }
};

onMounted(() => {
  tubiao();
});
</script>